<template>
  <div class="calculator_box" ref="calculator" :style="{height: Height, overflow: 'scroll'}">
    <div class="cal_content">
      <div v-if="total == 0" class="nolist">暂无该线路数据</div>
      <div class="cal_center" v-for="(item, index) in list">
        <div class="calculator_titles">
        <div class="cal_area">{{item.sadcode.substring(item.sadcode.lastIndexOf('/') + 1, item.sadcode.length)}}<p>{{item.spoiName}}</p></div>
        <div class="cal_icon"><i class="wechat-arrow0-right"></i></div>
        <div class="cal_area">{{item.eadcode.substring(item.eadcode.lastIndexOf('/') + 1, item.eadcode.length)}}<p>{{item.epoiName}}</p></div>
      </div>
        <div class="cal_center_list">
          <div class="cal_center_left cal_list">
            <i class="wechat-money"></i>
            {{item.count}}
          </div>
          <div class="cal_center_right cal_list"  @click="tabsSwitch(index)">详情
            <span v-show='item.active && !item.isactive'><i class="wechat-arrow-down"></i></span>
            <span v-show='!item.active && item.isactive'><i class="wechat-arrow-up"></i></span>
            <span v-show='item.active && item.isactive'><i class="wechat-arrow-down"></i></span>
            <!-- <span v-show='!item.active && !item.isactive'><i class="wechat-arrow-up"></i></span> -->
          </div>
        </div>
        <div v-show="index === i && isshow" class="cal_detail">
          <div class="cal_form">
            <label for="">油价</label>
            <div class="cal_input">
              <input type="text" placeholder="请输入油价" v-model="item.oilPrice" />
              <span>元/升</span>
            </div>
          </div>
          <div class="cal_form">
            <label for="">油耗</label>
            <div class="cal_input">
              <input type="text" placeholder="请输入油耗" v-model="item.oilWear" />
              <span>升/百公里</span>
            </div>
          </div>
          <div class="cal_form">
            <label for="">重量</label>
            <div class="cal_input">
              <input type="text" placeholder="请输入重量" v-model="item.weight" @blur="modify(index)"/>
              <span>吨</span>
            </div>
          </div>
          <div class="cal_form">
            <label for="">公里</label>
            <div class="cal_input">
              <input type="text" placeholder="请输入公里" v-model="item.distance"/>
              <span>公里</span>
            </div>
          </div>
          <div class="cal_form">
            <label for="">折旧</label>
            <div class="cal_input">
              <input type="text" placeholder="请输入折旧" v-model="item.depreciation" />
              <span>元</span>
            </div>
          </div>
          <div class="cal_form">
            <label for="">路桥</label>
            <div class="cal_input">
              <input type="text" placeholder="请输入路桥" v-model="item.pontage" />
              <span>元</span>
            </div>
          </div>
          <div class="cal_form">
            <label for="">其他</label>
            <div class="cal_input">
              <input type="text" placeholder="请输入其他" class="cal_other" v-model="item.other" readonly="readonly" />
              <span>元/公里</span>
            </div>
          </div>
          <div class="recount">
            <mt-button size="large" @click='recount(index)'>重新计算</mt-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        list: [],
        isshow: false,
        isactive: [],
        i: -1,
        count:[],
        Height: '',
        active:[],
        url: 'http://api.motu56.com',
        loadAcode: '',
        unloadAcode: '',
        total: 0,
      }
    },
    mounted () {
      this.Height = (window.screen.availHeight - this.$refs.calculator.offsetHeight - 15) + 'px'
      this.fclist()
    },
    computed: {

    },
    created () {
      this.loadAcode = this.getQueryString('loadAcode')
      this.unloadAcode = this.getQueryString('unloadAcode')
    },
    methods: {
      getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
      },
      fclist () {
        let that = this
        fetch(this.url + '/wechat/priceCalc?loadAcode='+this.loadAcode+'&unloadAcode='+this.unloadAcode+'', {
          credentials: "include"
        }).then(function(response) {
          if(response.ok){
            response.json().then(function(data){
              that.list = data.result.list
              that.total = data.result.total
              that.list.forEach((item, index) => {
                that.list[index].count = that.computeCount(item)
                that.list[index].active = true
                that.list[index].isactive = false
                that.list[index].val = ""
                // that.count.push(that.computeCount(item))
              })
            })
          }
        })
      },
      tabsSwitch (index) {
        this.list[index].isactive = true
        if (this.list[index].active == true) {
          this.list[index].active = false
        } else {
          this.list[index].active = true
        }
        this.i = index
        this.isshow = !this.isshow
      },
      recount (index) {
        this.list[index].count = this.computeCount(this.list[index])
        this.$forceUpdate()
      },
      computeCount(item) {
        let result =  (this.tryConvert(item.oilWear) / 100 ) * this.tryConvert(item.distance) * this.tryConvert(item.oilPrice) + this.tryConvert(item.depreciation) * this.tryConvert(item.distance) + this.tryConvert(item.pontage) + this.tryConvert(item.other)
        return result.toFixed(2)
      },
      tryConvert(str){
        try {
          return Number(str)
        } catch (e) {
          return 0
        }
      },
      modify (index) {
        let that = this;
        let data = {
          weight: that.list[index].weight,
          lpid: that.list[index].lid
        };
        fetch(this.url + '/wechat/getPontage?weight='+data.weight+'&lpid='+data.lpid+'', {
          credentials: "include"
        }).then(function(response){
          if(response.ok){
            response.json().then(function(data){
              that.list[index].pontage = data.result
            })
          }
        })
      }
    }
  }
</script>
<style>
  .nolist{ padding: 15px; text-align: center; }
  .calculator_box{padding: 15px; background: #edf3f3;}
  .cal_center{ padding-top: 8px;  border: 1px solid #bbbbbb; border-radius: 8px; margin-top: 10px; background: #fff;}
  .cal_center_list{ display: flex; padding: 10px 15px;}
  .cal_center .cal_list{ flex: 50%;}
  .cal_center_left{ color: #e51c23; }
  .cal_center_left .wechat-money{ color: #e51c23; }
  .cal_center_right{ text-align: right; color: #787878;}
  .calculator_titles{ border-bottom: 1px solid #e6eaed; display: flex; padding: 8px 15px 14px 15px;}
  .calculator_titles .cal_area{ flex:30%; color: #101010; text-align: center;}
  .calculator_titles .cal_area p{ font-size: 14px; color: #c9c9c9; margin-top: 6px;}
  .calculator_titles .cal_icon{ flex: 10%; padding-top: 10px; text-align: center;}
  .calculator_titles .wechat-arrow0-right{ font-size: 24px; color: #c9c9c9;}
  .cal_detail{ clear: both;width: 100%; padding: 0px 15px;}
  .cal_detail .cal_form{ display: flex; margin-top: 10px; position: relative;}
  .cal_detail .mint-cell{ margin-top: 0px; }
  .cal_detail .mint-cell-wrapper{ background-image: none; padding-right: 0px;}
  .cal_detail .mint-field .mint-cell-title{ width: 60px; }
  .cal_detail label{flex: 8%; margin-bottom: 0px; line-height: 36px; color: #101010;}
  .cal_detail .cal_input{flex: 75%; border: 1px solid #ccc;}
  .cal_detail input{padding: 10px 8px; border: none; color: #101010;}
  .cal_detail input.cal_other{ color: #888888; }
  .cal_detail span{ position: absolute; right: 6px; top: 8px; font-size: 14px; color: #999999; }
  .cal_detail .mint-field-core{ border: 1px solid #ccc; padding: 3px 5px; }
  .cal_detail .mint-field-other{ margin-left: 8px; }
  .wechat-edit{ color: #787878; }
  .recount{ margin: 15px 0px;}
  .recount .mint-button--default{background-color: #efd457; box-shadow:none;line-height: 50px; height: 50px;}
  .recount button label{ color: #101010; line-height: 50px; }
</style>
